//@ts-nocheck
import React, { useState, useRef, useImperativeHandle} from 'react';
import ReactDOM from 'react-dom';

let lastRef: any;
function Child(props: any, ref: any){
  return (
    <div>
      <input type="text" ref={ref}/>
    </div>
  )
}

/*
但这样直接暴露 破坏了封装的原则 很危险
*/
const ForwardChild = React.forwardRef(Child);
function Parent(){
  const [number,setNumber] = useState(0)
  const refObject = useRef();


  function getFocus(){
    console.log('refObject:',refObject);
    refObject.current.focus()
  }
  return (
    <div>
      <ForwardChild ref={refObject}/>
      <button onClick={getFocus}>获得焦点</button>
      <button onClick={()=>setNumber(x=>x+1)}>+</button>
    </div>
  )
}

ReactDOM.render(<Parent/>, document.getElementById('root'));
